<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/layui.js"></script>
    <link rel="stylesheet" href="/html/js/css/layui.css" media="all">
</head>
<style>
    img {
        width: 50px;
        height: 50px;
    }

    #imgChoose img {
        margin-left: 10px;
        margin-right: 5px;
    }

</style>
<script>
    //根据情况修改提示框的状态
    function spanColorChange(result, spanId, notifyWord) {
        $(spanId).innerHTML = notifyWord;
        if (result == "no") {
            $(spanId).style.color = "red";
        } else {
            $(spanId).style.color = "green";
        }
    }

    //检查是否重名
    async function checkExist() {
        let username = $("username").value.trim();

        if (username == "" || username.length > 10 || username.length == 0) {
            alert("请不要输入无效的用户名")
            return;
        }

        let param = {
            username: username
        }
        let result = await ajaxGet("/user/checkExist", param);
        if (result === "no") {
            $("username").value = "";
            spanColorChange(result, "notify", "重复的用户名");
        } else {
            spanColorChange(result, "notify", "用户名通过")
        }
    }

    //检查用户二次密码输入是否相同
    function checkPassword() {
        if ($("password").value.trim() === $("password2").value.trim()) {
            spanColorChange("yes", "notify2", "二次密码相同");
        } else {
            spanColorChange("no", "notify2", "二次密码输入有误");
            $("password2").value = "";
        }
    }

    //进行用户注册
    async function userRegister() {
        let username = $("username").value.trim();
        let password = $("password").value.trim();
        let email = $("email").value.trim();
        //获取radio按钮值
        let headImg = $N("headImg").value.trim();


        let param = {
            username: username,
            password: password,
            email: email,
            headImg: headImg
        }

        let result = await ajaxGet("/user/register", param);
        //注册成功
        if (result === "ok") {
            location.href = "/html/theme/theme.html";
        }
    }

</script>
<body>
<div>
    <ul class="layui-nav" style="display: flex;justify-content: center">
        <li class="layui-nav-item"><a href="">首页</a></li>
        <li class="layui-nav-item"><a href="/html/login/login.html">登录</a></li>
        <li class="layui-nav-item layui-this"><a href="">注册</a></li>
        <li class="layui-nav-item"><a href="">退出</a></li>
        <li class="layui-nav-item"><a href="">管理</a></li>
        <li class="layui-nav-item"><a href="">风格</a></li>
    </ul>
</div>

<div style="display: flex;justify-content: center">
    <div style="width: 50%">
        <div style="display: flex;justify-content: space-around;margin: 10px">
            <label class="layui-form-label">用户名 <br><span id="notify" style="font-size:smaller">请输入1-10字符</span>
            </label>
            <input onblur="checkExist()" type="text" name="username" id="username" required lay-verify="required"
                   placeholder="用户名"
                   autocomplete="off"
                   class="layui-input" style="width: 300px">
        </div>
        <br>
        <div style="display: flex;justify-content: space-around;margin: 10px">
            <label class="layui-form-label">用户密码<br><span style="font-size:smaller">请输入1-10字符</span></label>
            <input type="password" name="password" id="password" required lay-verify="required"
                   placeholder="用户密码"
                   autocomplete="off"
                   class="layui-input" style="width: 300px">
        </div>
        <br>
        <div style="display: flex;justify-content: space-around;margin: 10px">
            <label class="layui-form-label">密码确认<br><span id="notify2"
                                                          style="font-size:smaller">请输入1-10字符并相同</span></label>
            <input onblur="checkPassword()" type="password" name="username" id="password2" required
                   lay-verify="required"
                   placeholder="密码确认"
                   autocomplete="off"
                   class="layui-input" style="width: 300px">
        </div>
        <br>
        <div style="display: flex;justify-content: space-around;margin: 10px">
            <label class="layui-form-label">用户邮件<br><span style="font-size:smaller">如xxx@bb.com</span></label>
            <input type="email" name="password" id="email" required lay-verify="required"
                   placeholder="邮箱"
                   autocomplete="off"
                   class="layui-input" style="width: 300px">
        </div>

        <div style="display: flex;justify-content: space-around">
            <label class="layui-form-label">选择头像</label>
            <div style="display: flex;justify-content: space-around">
                <div>
                    <input type="radio" name="headImg" value="1" checked>
                    <img src="/html/imgs/1.jpg">
                </div>
                <div>
                    <input type="radio" name="headImg" value="2">
                    <img src="/html/imgs/2.jpg">
                </div>
                <div>
                    <input type="radio" name="headImg" value="3">
                    <img src="/html/imgs/3.jpg">
                </div>
                <div>
                    <input type="radio" name="headImg" value="4">
                    <img src="/html/imgs/4.jpg">
                </div>
                <div>
                    <input type="radio" name="headImg" value="5">
                    <img src="/html/imgs/5.jpg">
                </div>
            </div>
        </div>
        <div style="display: flex;justify-content: center;margin-top: 50px">
            <button type="button" class="layui-btn" onclick="userRegister()">点击注册</button>
        </div>
    </div>
</div>


</body>
</html>